<template>
    <common-field v-bind="$attrs">
        <el-slider
            class="slider"
            v-model="currentSize"
            :min="50"
            :max="1000"
            :format-tooltip="formatToolTip"
            :show-input="true"
            :show-input-controls="false"
        >
        </el-slider>
    </common-field>
</template>

<script lang="ts">
import {
  Options, Vue, Emit, Prop, Watch,
} from 'vue-property-decorator';
import { ElSlider } from 'element-plus';
import CommonField from './common-field.vue';

@Options({
  components: {
    ElSlider,
    CommonField,
  },
})
export default class InnerImageSlider extends Vue {
    @Prop({
      type: Number,
    })
    size = 200;

    private currentSize = this.size || 200;

    @Watch('currentSize', { immediate: true })
    @Emit('update:size')
    private changeSize(currentSize: number): number {
      return currentSize;
    }

    private formatToolTip(value: number): string {
      return `${value} px`;
    }
}
</script>

<style lang='less' scoped>
.slider {
    margin-left: 10px;
    :deep(.el-slider__input) {
        width: 40px!important;
        .el-input__inner {
            height: 20px;
            line-height: 20px;
            padding:0 4px;
            font-size: 12px;
        }
    }
    :deep(.show-input) {
        margin-right: 50px;
    }
}
</style>
